<template>
    <div class="main">
        <div v-for="item in topconfig">
            <div class="title">{{ item.label }}</div>
            <div class="content" :ref="item.name"></div>
        </div>
    </div>
</template>

<script>
import { topconfig, chartOption } from './config'

import * as echarts from 'echarts'
import { deepClone } from '@/plugins/clone'
export default {
    data() {
        return {
            active: 0,
            topconfig,
        }
    },
    props: {
        statistical_data: {
            type: Object,
            default: {},
        },
    },

    methods: {
        change(i) {
            this.active = i
        },
        drawChart(statistical_data) {
            if (!statistical_data) {
                return // 数据未准备好，不绘制图表
            }

            deepClone(this.topconfig).forEach((e) => {
                let obj = statistical_data[e.name]
                let ref = this.$refs[e.name][0]
                if (ref && ref.__echartsInstance) {
                    ref.__echartsInstance.dispose()
                }

                if (!e.myChart) e.myChart = echarts.init(ref)
                let data1 = []
                let data2 = []
                let { dataConfig } = e
                dataConfig.forEach((e2) => {
                    data1.push(e2.label)
                    data2.push(obj[e2.name])
                })

                let option = chartOption(data2, data1)

                e.myChart.setOption(option)
            })
        },
    },
    created() {},
}
</script>

<style scoped lang="less">
.main {
    height: calc(100% - 200px);
    width: 100%;
    display: flex;
    height: 200px;
    width: 100%;
    justify-content: space-around;

    > div {
        background-color: rgba(19, 39, 76, 0.7);
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        width: 25%;
        height: 100%;
    }
    .title {
        margin: 20px 0 0 0;
        padding-left: 20px;
        color: #11b7a4;
        font-size: 18px;
        font-weight: 500;
        border-left: 5px solid #11b7a4;
    }
    .content {
        flex-grow: 1;
        padding: 10px;
    }
}
</style>
